<template>
  <div class="agentTopTableBar-box">
    <div class="main-box">
        <div :class='activte == "agent"?"active":""' @click='goto("agent")'>{{$t('Agent')}}</div>
        <div :class='activte == "user"?"active":""' @click='goto("user")'>{{$t('User')}}</div>
        <div :class='activte == "inverter"?"active":""' @click='goto("inverter")'>{{$t('Inverter')}}</div>
        <div :class='activte == "sites"?"active":""' @click='goto("sites")'>{{$t('Site')}}<br></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      return {

      };
  },
  computed: {
      activte(){
          return this.$route.path.split('/')[2]
      }
  },   
  methods: {
      goto(url){
          this.$emit('subChange',url)
          this.$router.push({path:'/agentHome/'+url,});
      }
  },
};
</script>

<style  lang="less" scoped>
.agentTopTableBar-box{
    width: 100%;
    .main-box{
        width: 100%;
        height: 45px;
        background-color: #3B3D4E;
        color: #fff;
        display: flex;
        align-items: center;
        div{
            flex: 1;
        }
    }
    .active{
        color:#E57E12;
    }
}
</style>
